<template>
	<view class="view-page">
		<div class="form">
			<view class="tip">
				<text class="u-error">*</text>
				<text>精准的信息，可以获得更准确的数据分析</text>
			</view>
			<u-form class="form" :model="form">
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="nickName" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									昵称
								</view>
								<view class="u-flex-sub"><u-input border="none" v-model="form.nickName" inputAlign="right" type="text"
										placeholder="请输入昵称" /></view>
							</view>
						</u-form-item>
						<u-form-item prop="gender" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									性别
								</view>
								<view class="u-flex-sub">
									<u-radio-group :iconSize="30" :size="36" v-model="form.gender" placement="row">
										<u-radio :customStyle="{ marginLeft: '16px' }" v-for="(item, index) in sexList" :key="index"
											:label="item.name" :name="item.name" :labelSize="30" :activeColor="themeColor"></u-radio>
									</u-radio-group>
								</view>
							</view>
						</u-form-item>
						<u-form-item prop="phone" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0"
								@tap="show = true">
								<view class="label">
									<text class="u-error">*</text>
									出生日期
								</view>
								<view class="u-flex-sub"><u-input border="none" readonly v-model="form.birth" inputAlign="right"
										type="text" placeholder="请选择出生日期" /></view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
					</div>
				</div>
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="height" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0"
								@tap="showHeight = true">
								<view class="label">身高</view>
								<view class="u-flex-sub u-flex align-center justify-end">
									<u-input border="none" readonly v-model="form.height" inputAlign="right" type="text"
										placeholder="请选择身高用于计算体脂率" />
									<text class="margin-left">cm</text>
								</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<u-form-item prop="weight" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0"
								@tap="showWeight = true">
								<view class="label">当前体重</view>
								<view class="u-flex-sub u-flex align-center justify-end">
									<u-input border="none" readonly v-model="form.weight" inputAlign="right" type="text"
										placeholder="请选择当前体重" />
									<text class="margin-left">kg</text>
								</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<u-form-item prop="patriRelationName">
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0"
								@tap="showPatriRelation = true">
								<view class="label">与用户关系</view>
								<view class="u-flex-sub">
									<u-input border="none" readonly v-model="form.patriRelationName" readonly inputAlign="right"
										type="text" placeholder="请选择与用户关系" />
								</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
					</div>
				</div>
			</u-form>
			<view class="footerBar">
				<view class="loginBtn">
					<u-button type="primary" :loading="loading" text="保存" shape="circle" @tap="submit"></u-button>
				</view>
			</view>
		</div>
		<u-datetime-picker :show="show" @close="show = false" @cancel="show = false" @confirm="confirmBirth" v-model="birth"
			mode="date" :minDate="minDate" :itemHeight="68" :visibleItemCount="5"
			:confirmColor="themeColor"></u-datetime-picker>
		<!-- 身高 -->
		<u-picker @close="showHeight = false" @cancel="showHeight = false" @confirm="confirmHeight" :show="showHeight"
			:itemHeight="68" :visibleItemCount="5" :columns="columns" :immediateChange="true"
			:defaultIndex="[110]"></u-picker>
		<!-- 体重-->
		<u-picker @close="showWeight = false" @cancel="showWeight = false" @confirm="confirmWeight" :show="showWeight"
			:itemHeight="68" :visibleItemCount="5" :columns="columnsWeight" :immediateChange="true"
			:defaultIndex="[20, 0, 0]"></u-picker>
		<!-- 亲子关系-->
		<u-picker @close="showPatriRelation = false" @cancel="showPatriRelation = false" @confirm="confirmPatriRelation"
			:show="showPatriRelation" :itemHeight="68" :visibleItemCount="5" :columns="relationList"
			:immediateChange="true"></u-picker>
	</view>
</template>

<script>
	import md5Libs from '@/utils/md5.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				form: {
					gender: '男',
					nickName: '',
					birth: '',
					weight: '',
					height: '',
					patriRelationCode: '',
					patriRelationName: ''
				},
				birth: Number(new Date('1960-01-01')),
				sexList: [{
						name: '男',
						value: 0
					},
					{
						name: '女',
						value: 1
					}
				],
				show: false,
				minDate: Number(new Date('1900-01-01')),
				showHeight: false,
				columns: [],
				showWeight: false,
				columnsWeight: [
					[],
					[],
					[]
				],
				showPatriRelation: false,
				relationList: [] //亲子关系
			};
		},
		onLoad(options) {},
		computed: {
			...mapState(['userInfo'])
		},
		created() {
			let heightList = [];
			for (var i = 50; i <= 226; i++) {
				heightList.push({
					value: i,
					text: i + 'cm'
				});
			}
			this.columns = [heightList];
			let columnsWeight = [
				[],
				[],
				[{
					value: 'kg',
					text: 'kg'
				}]
			];
			for (var i = 30; i <= 150; i++) {
				columnsWeight[0].push({
					value: i,
					text: i
				});
			}
			for (var i = 0; i <= 9; i++) {
				columnsWeight[1].push({
					value: i,
					text: '.' + i
				});
			}
			console.log('columnsWeight', columnsWeight);
			this.columnsWeight = columnsWeight;
			this.getDictItemKeyList(['PATRI_RELATION']);
		},
		methods: {
			confirmBirth(e) {
				console.log('e', e, this.$u.timeFormat(e.value, 'yyyy-mm-dd'));
				this.form.birth = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.show = false;
			},
			confirmHeight(e) {
				this.form.height = this.columns[0][e.indexs[0]].value;
				this.showHeight = false;
			},
			confirmWeight(e) {
				let weight = '';
				for (var i = 0; i < e.indexs.length - 1; i++) {
					weight += this.columnsWeight[i][e.indexs[i]].text;
				}
				this.form.weight = weight;
				this.showWeight = false;
			},
			confirmPatriRelation(e) {
				this.form.patriRelationCode = this.relationList[0][e.indexs[0]].value;
				this.form.patriRelationName = this.relationList[0][e.indexs[0]].text;
				this.showPatriRelation = false;
			},
			//查询亲子关系
			getDictItemKeyList(keys) {
				var param = keys;
				this.$postAction(this.$api.getDictItemKeyList, param).then(res => {
					this.relationList = [
						res.PATRI_RELATION.map((item, index) => {
							return {
								value: item.itemCode,
								text: item.itemName
							};
						})
					];
				});
			},
			submit() {
				if (!this.form.nickName || !this.form.nickName.trim()) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				if (!this.form.birth || !this.form.birth.trim()) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					});
					return;
				}
				let {
					birth,
					...paramter
				} = this.form;
				this.$postAction(this.$api.addAccountUser, {
					...paramter,
					birth: new Date(birth).getTime(),
					userId: this.userInfo.userId
				}).then(da => {
					console.log('da', da);
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
					setTimeout(() => {
						if (this.$u.pages().length > 1) {
							this.$Router.back();
						} else {
							this.$Router.replaceAll({
								path: '/pages/index/index'
							});
						}
					}, 500);
				});
			}
		}
	};
</script>
<style>
	page {
		overflow-y: auto;
		background: #f7f7fc;
	}
</style>
<style lang="scss" scoped>
	page,
	.page-view {
		height: 100%;
		width: 100%;
		background: #f7f7fc;

		.tip {
			padding-left: 30rpx;
			line-height: 40rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.form-box {
		margin: 30upx 0;

		/deep/ .u-radio-group--row {
			justify-content: flex-end;
		}
	}

	.footerBar {
		width: 580upx;
		margin: 50upx auto 0;
	}

	/deep/.form {
		overflow: auto;
		height: calc(100vh - 140upx);

		.placeholder {
			color: #c5c5c5;
		}

		.u-border-bottom {
			border: 1rpx #f8f8f8 solid;
		}

		.uni-input-input {
			color: #1b0a1c;
		}

		.u-textarea {
			padding: 0 9px !important;
		}

		.input-bg {

			.uni-input-wrapper,
			input,
			.u-input__content__field-wrapper__field {
				background: #fbfbfb;
				text-align: right;
			}
		}

		.input-box {
			background: #fff;
			padding-left: 32upx;
			position: relative;

			.close {
				position: absolute;
				top: 0;
				right: 0;
				background-color: rgba(255, 0, 0, 0.9);
				height: 24px;
				width: 24px;
				display: flex;
				flex-direction: row;
				border-bottom-left-radius: 100px;
				align-items: center;
				justify-content: center;
				z-index: 3;
			}

			&+.input-box {
				// margin-top: 16upx;
			}

			input {
				text-align: right;
			}

			.label {
				font-size: 30upx;
				font-weight: 500;
				color: #1b0a1c;
				width: 235upx;
				display: block;
			}
		}
	}
</style>